<script setup>
import { useUserStore  } from '../stores/user'
import {ref,reactive,computed} from 'vue'
import getArticle from '../api/blurredArticles.js'
import article from '../api/getArticleById';
import { useRouter } from 'vue-router';
import getUser from '../api/getuser.js'
import images from '../components/imageShow.vue';
import Header from '../components/header.vue'
import router from '../router';
import {Search} from '@element-plus/icons-vue'
const use = useRouter() ;

const flagForSearch = ref(false)
const loading = ref(false)
const noMore = ref(false)
const disabled = computed(() => loading.value || noMore.value)
const userInform = useUserStore()
const Articles = ref([])
const search = ref("")
const paramValue = ref("")
const param = ref();
const pagesize = ref(10)
const search_value = ref("")


const urlParams = new URLSearchParams(window.location.search);
search.value = urlParams.get('searchValue');
paramValue.value = urlParams.get('paramValue');

const pageNum = ref(0)

function getParam(){
if(paramValue.value == "all")
{param.value = {
    search: search.value,
    page: pageNum.value,
    size: pagesize.value
}}
else if(paramValue.value == "type")
{
    param.value = {
    type: search.value,
    page: pageNum.value,
    size: pagesize.value
    }
}
else if(paramValue.value === "author")
{
    param.value = {
    author:search.value,
    page: pageNum.value,
    size: pagesize.value
}
}
else if(paramValue.value === "title")
{
    param.value = {
    title: search.value,
    page: pageNum.value,
    size: pagesize.value
}
}
else {
    router.push("/article?param="+search.value)
    
}
}
function getArticles(){
    if(param.value)
        getArticle(paramValue.value,param.value).then(function(response) {
          console.log(response.data)
        if(response.data == "" || response.data==undefined)
        noMore.value = true ; 
        else if(response.status == 200)
        {        
          console.log(response.data)
            response.data.forEach(element => {
            Articles.value.push(element);
        });
        noMore.value  = false}
        }
        )

}

let type = ref()

const load = () => {
    loading.value = true
    setTimeout(() => {  
    loading.value = false
    pageNum.value = Number(Number(pageNum.value)+1)
    getParam()
    getArticles()
    }, 1000)
    
}
getParam()
getArticles()

function ToArticle(value){
  use.push("/article?param="+value)
}

function changeTheSearch(){
  pageNum.value=0
  Articles.value=[]
  search.value = search_value.value
  getParam()
  getArticles()
  
  console.log(search_value.value,param.value)
}

</script>

<template>
<el-container>
    <el-header> <Header></Header> </el-header>

    <div style="position: relative; top: 4vh; width: 84%; left: 8%; margin-top: 30px;">   
    
    
    <div class="infinite-list-wrapper" style="overflow: auto">
      <div><el-input
        v-model="search_value"
        class="w-50 m-2"
        placeholder="搜索"
        :prefix-icon="Search"
        v-on:keydown.enter.native="changeTheSearch()"
      /></div>
<div style="overflow: auto;height: 70vh;">
      <div v-if="flagForSearch">
        <el-empty description="description" />
      </div>
      <ul v-infinite-scroll="load" infinite-scroll-distance="10" :infinite-scroll-disabled="disabled" v-else="flagForSearch">
      <li v-for="(item,index) in Articles" :key="index" class="display-item" @click="ToArticle(item.id)">
        <el-card shadow="hover" class="card-box"> 
                <div style="width: 100px;"><images class="image-box" :value="item.imageId"></images></div>
                <nav class="content-box">
                <div class="title"><a href="#">{{ item.title }}</a></div>
                <div class="author">发布者： <el-link>{{ item.userId }}</el-link> &nbsp;&nbsp;&nbsp; <br>作者：{{ item.author }}</div>
                <div class="type"><el-tag size="small">{{ item.type }}</el-tag></div>
                <div><el-text size="small"> 日期:{{ item.authorCreatedTime }}</el-text> &nbsp; 访问量：{{ item.visits }} </div>
                <div></div>
                </nav>
            </el-card>
      </li>
      </ul>
      <p v-if="loading">Loading...</p>
      <p v-if="noMore">已经到底了</p>
    </div>

    </div>
</div>
</el-container>
</template>

<style>
@import "../css/userinform.css"
</style>